import React, { Component } from 'react'
import { Modal, Button, Row, Col } from 'antd'
import PropTypes from 'prop-types'
import moment from 'moment'
import { download } from '@js/downloadRename'
import style from './PayModal.module.less'

export default class Detail extends Component {
  formatDate (d) {
    if (!d) {
      return null
    }
    return moment(d * 1000).format('YYYY-MM-DD')
  }

  // 格式化金钱
  formatMoney (d) {
    if (!d) {
      return '无'
    }
    return `${d} 元`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }

  // 渲染文件
  renderFile (file) {
    if (!file || !file.length) {
      return '无'
    }
    const f = file[0]
    return <a className={style.link} onClick={() => download(f.path, f.original_filename)}>{f.original_filename}</a>
  }

  renderDetail () {
    const d = this.props.billData
    if (!d) {
      return null
    }
    return (
      <div>
        <Row className={style.line}>
          <Col flex='80px'>交费类型：</Col>
          <Col flex='1'>{d.ispay === 1 ? '交费' : '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>交费时间：</Col>
          <Col flex='1'>{this.formatDate(d.pay_datetime) || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>交费单号：</Col>
          <Col flex='1'>{d.platform_serialno || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>仲裁费：</Col>
          <Col flex='1'>{this.formatMoney(d.amount)}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>受理费：</Col>
          <Col flex='1'>{this.formatMoney(d.fee_acceptance)}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>处理费：</Col>
          <Col flex='1'>{this.formatMoney(d.fee_processing)}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>其他费用：</Col>
          <Col flex='1'>{this.formatMoney(d.fee_other)}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>缴费金额：</Col>
          <Col flex='1'>{this.formatMoney(d.pay_amount)}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>支付人：</Col>
          <Col flex='1'>{d.payer_actual || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>交费原因：</Col>
          <Col flex='1'>{d.description || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>减/缓情况：</Col>
          <Col flex='1'>{d.remark1 || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>支付备注：</Col>
          <Col flex='1'>{d.remark || '无'}</Col>
        </Row>
        <Row className={style.line}>
          <Col flex='80px'>交费凭证：</Col>
          <Col flex='1'>{this.renderFile(d.file)}</Col>
        </Row>
      </div>
    )
  }

  render () {
    return (
      <Modal
        title='查看详情'
        open={this.props.visible}
        onCancel={() => this.props.hide()}
        destroyOnClose
        footer={[<Button type='primary' key='1' onClick={() => this.props.hide()}>确定</Button>]}
      >
        {this.renderDetail()}
      </Modal>
    )
  }
}

Detail.propTypes = {
  visible: PropTypes.bool,
  hide: PropTypes.func,
  billData: PropTypes.object
}

Detail.defaultProps = {
  visible: false,
  hide: function () {},
  billData: {}
}
